import { memo, useState } from "react";
import { Input, Button } from '../CwFormCpn'
import { mobilePasswordLogin } from "@/services/user.js"
import md5 from "md5"
import useAuth from "../../hooks/useAuth";
import jsCookie from "js-cookie";
export default memo(function LoginForm () {
    const [errMsg, setErrMsg] = useState('')
    const { setProfile } = useAuth()
    const handleSubmitLoginForm = (e) => {
        e.preventDefault()
        const [{ value: phone }, { value: password }] = e.target
        if (!phone) {
            setErrMsg("请填写手机号码！")
            return
        } else if (!password) {
            setErrMsg("请填写密码！")
            return
        } else {
            setErrMsg("")
        }
        mobilePasswordLogin({
            phone,
            md5_password: md5(password)
        }).then(res => {
            console.log('====================================');
            console.log(res);
            if (res.code === 200) {
                jsCookie.set("music-cookie", res.cookie)
                setProfile(res.profile)
            } else {
                setErrMsg("账号密码错误！")
            }
            console.log('====================================');
        })
    }
    return <div style={{ textAlign: 'center' }}>
        <h1 style={{ fontSize: "18px" }}>网易云手机密码登录</h1>
        <form onSubmit={handleSubmitLoginForm}>
            <div>
                <Input name='telephone' defaultValue={'15767876318'} id='telephone' style={{ width: '60%', margin: '10px 0px' }} placeholder='请输入手机号码...' />
            </div>
            <div>
                <Input autoComplete={'true'} defaultValue={'shamiao521'} name='password' id='password' type='password' style={{ width: '60%', margin: '10px 0px' }} placeholder='请输入密码...' />
            </div>
            {errMsg && <p style={{ color: "red" }}>{errMsg}</p>}
            <Button style={{ width: '60%', margin: '10px 0px' }}>
                登录
            </Button>
        </form>
    </div>
})